<template>
  <div>
    <header class="header">
      <div class="header_left">
        <div class="header_zi">何</div>
        <div class="header_zi">秋</div>
        <div class="header_zi">刀</div>
        <div class="header_zi">鱼</div>
      </div>
      <div class="header_right">
        <input type="text" placeholder="请输入你要搜索的歌名!" @keyup.enter="serachClick" v-model="value" />
        <input type="button" value="搜索" @click="serachClick" />
      </div>
    </header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ""
    };
  },
  watch: {
    // 监视$router的值是否发生改变
    $route(val) {
      if (this.$route.query.value == this.value) {
        console.log(123);
      }
    }
  },
  methods: {
    serachClick() {
      // 判断输入的内容是否为空
      if (!this.value.trim() == "") {
        // 在判断value 里面的值是否等于$route.query里面的值
        if (this.value !== this.$route.query.value) {
          //把参数携带过去
          return this.$router.push({
            path: "/result",
            query: { value: this.value }
          });
        } else {
          this.$message({
            message: "请不要重复输入和上次搜索一样的内容！！！！",
            type: "warning"
          });
        }
      } else {
        this.$message({
          message: "请不要输入空白内容哦！！！！",
          type: "warning"
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 50px;
  background-color: rgb(57, 175, 234);
  display: flex;
  align-items: center;
}
.header_left {
  flex: 1;
  display: flex;
  .header_zi {
    border: 2.002px solid rgba(245, 245, 245, 0.288);
    width: 29.999px;
    height: 29.999px;
    text-align: center;
    line-height: 29.999px;
    border-radius: 10.001px;
    color: rgb(224, 129, 129);
    font-size: 15.001px;
    margin-left: 15.001px;
    font-weight: 550;
    box-shadow: 0 0 10.001px #ccc;
  }
  div:nth-child(2) {
    color: rgb(98, 241, 134);
    border: 2.002px solid rgba(253, 0, 0, 0.233);
  }
  div:nth-child(3) {
    color: rgba(228, 0, 133, 0.178);
    border: 2.002px solid rgba(137, 43, 226, 0.247);
  }
  div:nth-child(4) {
    color: rgba(250, 2, 2, 0.685);
    border: 2.002px solid rgba(224, 198, 50, 0.247);
  }
}
.header_right {
  width: 299.999px;
  height: 50px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  margin-right: 40px;
  input:nth-child(1) {
    width: 299.999px;
    height: 29.999px;
    padding-left: 10.001px;
    border-radius: 15.001px;
    border: 1.001px solid #ccc;
    outline: none;
    font-size: 15.001px;
  }
  input:nth-child(2) {
    position: absolute;
    right: 0;
    border: 1.001px;
    color: #000;
    font-size: 14px;
    height: 29.999px;
    outline: none;
    border-radius: 10.001px;
    padding: 0px 10.001px;
    cursor: pointer;
    background-color: #ccc;
  }
}
</style>